<template>
    <div class="goods_attribute_form_container">
        <vxe-table-template :data="dataList" :options.sync="tableOptions" />
    </div>
</template>

<script>
import provide from "@common/mixins/provide";
import UpDownFunction from "@common/utils/UpDownFunction";

export default {
    name: "GoodsAttributeList",
    extends: provide,
    props: {
        row: {
            type: Object,
            default: null,
        },
    },
    data() {
        let _this = this;
        return {
            dataList: [],
            tableOptions: {
                ref: "$goodsAttributeTable",
                container: ".goods_attribute_container",
                maxHeight: 490,
                editRules: {
                    attribute: [
                        { required: true, message: '请输入参数名称', trigger: 'blur' },
                    ],
                    value: [
                        { required: true, message: '请输入参数值', trigger: 'blur' },
                    ],
                },
                columns: [
                    {
                        label: '参数名称',
                        prop: 'attribute',
                        align: 'center',
                        editRender: {
                            name: "CustomInput",
                            props: {
                                clearable: true,
                            },
                        }
                    },
                    {
                        label: '参数值',
                        prop: 'value',
                        align: 'center',
                        editRender: {
                            name: "CustomInput",
                            props: {
                                clearable: true,
                            },
                        }
                    },
                ],
                operates: {
                    fixed: 'right',
                    list: [
                        {
                            id: "add",
                            show: true,
                            type: "primary",
                            tooltip: {
                                content: "插入",
                            },
	                        svg: {
		                        iconClass: 'icon-insert',
	                        },
                            permission: "",
                            method: (key, row) => {
                                _this.addRow(row);
                            },
                        },
                        {
                            id: "del",
                            icon: "fa fa-trash-o",
                            type: "danger",
                            tooltip: {
                                content: "删除",
                            },
                            permission: "",
                            show: true,
                            method: (key, row) => {
                                _this.delRow(row);
                            },
                        },
                        {
                            id: 'up',
                            type: 'primary',
                            icon: 'el-icon-top',
                            size: 'mini',
                            show: true,
                            tooltip: {
                                content: '上移',
                            },
                            disabledFn(row) {
                                return row._index === 0;
                            },
                            method: (index, row) => {
                                _this.moveData(row, -1);
                            }
                        },
                        {
                            id: 'down',
                            type: 'primary',
                            icon: 'el-icon-bottom',
                            size: 'mini',
                            show: true,
                            tooltip: {
                                content: '下移',
                            },
                            disabledFn(row) {
                                return row._index === _this.dataList.length - 1;
                            },
                            method: (index, row) => {
                                _this.moveData(row, 1);
                            }
                        },
                    ],
                },
                pagination: false,
                getMaxHeight() {
                    return $(_this.getActiveTabsContainer()).height() * 0.8 - 100;
                },
            },
            initAttributeObj: {
                attribute: '',
                value: '',
                sn: 1,
            },
        }
    },
    watch: {
        row: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        async init() {
            const _this = this;
            if (!_this.row) {
                return;
            }
            _this.dataList = [];
            await _this.initGoodsAttributeList(_this.row);
            if (!_this.$utils.isNotEmptyList(_this.dataList)) {
                _this.addRow();
            }
        },
        // 获取物料参数
        initGoodsAttributeList(row) {
            let _this = this;
            return _this.fetchData(_this.$api.API_GetJxcGoodsAttributeListByGoodsSid, {
                goods_sid: row.sid
            }).then(res => {
                _this.dataList = _this.resetIndex(res.data);
            }).catch(() => {
            });
        },
        // 增加行
        addRow(row) {
            let _this = this;
            let list = _this.dataList.map(item => $.extend({}, item));
            let obj = $.extend({}, _this.initAttributeObj, {
                sn: row ? row.sn + 1 : 1,
            });
            list.push(obj);
            _this.dataList = _this.resetIndex(list);
        },
        // 删除行
        delRow(row) {
            let _this = this;
            let list = _this.dataList.filter(item => item._index !== row._index);
            if (!_this.$utils.isNotEmptyList(list)) {
                let obj = $.extend({}, _this.initAttributeObj, {
                    sn: 1,
                });
                list.push($.extend({}, obj));
            }
            _this.dataList = _this.resetIndex(list);
        },
        moveData(row, type) {
            const _this = this;
            let dataList = _this.dataList.map(item => $.extend({}, item));
            let fun = new UpDownFunction(dataList, row._index);
            if (type === 1) {
                dataList = fun.downData();
            } else {
                dataList = fun.upData();
            }
            dataList.forEach((item, index) => {
                item.sn = index + 1;
            });
            _this.dataList = _this.resetIndex(dataList);
        },
        async confirm() {
            const _this = this;
            let errMap = false;
            if (_this.$goodsAttributeTable) {
                errMap = await _this.$goodsAttributeTable.validate(true).catch(errMap => errMap);
            }
            if (errMap) {
                return false;
            }
            let attributeList = _this.dataList.map(item => {
                return {
                    id: item.id,
                    sid: item.sid,
                    goods_sid: _this.row.sid,
                    attribute: item.attribute,
                    value: item.value,
                    sn: item.sn,
                };
            });
            return _this.fetchData(_this.$api.API_BatchSaveJxcGoodsAttribute, {
                attributeList,
            }).then(() => {
                _this.$message.success('保存成功！');
                return true;
            }).catch(() => {
                return false;
            });
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>

</style>
